<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'
import { SubmitBtn } from '@fl/components'
import { cloneDeep } from 'lodash-es'
import { formatTime } from '@fl/utils'

const visible = defineModel<boolean>('visible', { required: true })
const emits = defineEmits(['confirm'])

const formRef = ref()
const title = ref('定时发布')
const isPending = ref(false)

const initialState = {
    dateTime: '',
}
const state = ref(cloneDeep(initialState))

// 提交
async function submit() {
    const valid = await formRef.value.formInstance.validate()
    if (valid) {
        const params = {
            dateTime: formatTime(state.value.dateTime, 'yyyy-MM-dd HH:mm:ss')
        }
        isPending.value = true
        setTimeout(() => {
            isPending.value = false
            cancel()
        }, 800)
        emits('confirm', params)
    }
}

function cancel() {
    visible.value = false
}

function reset() {
    formRef.value.formInstance.resetFields()
}

const columns: PlusColumn[] = [
    {
        label: '发布时间',
        prop: 'dateTime',
    },

]

const rules = {
    dateTime: [
        {
            message: '请选择发布时间',
            required: true,
        },
    ],
}
</script>

<template>
    <PlusDialog v-model="visible" :title="title" width="500" close-on-press-escape :has-footer="false" @cancel="cancel"
        @closed="reset">

        <div class="mt-20">
            <PlusForm ref="formRef" v-model="state" :columns="columns" :label-width="120" :rules="rules"
                :has-footer="false" :row-props="{ gutter: 20 }">
                <template #plus-field-dateTime>
                    <el-date-picker v-model="state.dateTime" type="datetime" placeholder="请选择发布时间" />
                </template>
            </plusform>
        </div>

        <div class="mx-auto mt20 flex justify-center">
            <el-button @click="cancel">
                取消
            </el-button>
            <SubmitBtn type="primary" :loading="isPending" @click="submit">
                提交
            </SubmitBtn>
        </div>
    </PlusDialog>
</template>
